<%@ page import="service.PersonService" %>
<%@ page import="java.util.List" %>
<%@ page import="dao.Course" %>
<%@ page import="service.CourseService" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%
    String identity=request.getSession().getAttribute("identity").toString();
    String id,nickname = null,school=null,major=null,grade=null,degree=null,gender=null,birthday=null,headPath = null;
    id=request.getSession().getAttribute("username").toString();
    if(identity.equals("teacher")){
        nickname=PersonService.getTeacherName(id);
        request.getSession().setAttribute("nickname",nickname);
        school=PersonService.getTeacherSchool(id);
        major=PersonService.getTeacherMajor(id);
        grade=PersonService.getTeacherGrade(id);
        degree=PersonService.getTeacherDegree(id);
        gender=PersonService.getTeacherGender(id);
        birthday=PersonService.getTeacherBirthday(id);
        headPath=PersonService.getTeacherHeadPath(id);
    }else {
        nickname=PersonService.getStudentName(id);
        request.getSession().setAttribute("nickname",nickname);
        school=PersonService.getStudentSchool(id);
        major=PersonService.getStudentMajor(id);
        grade=PersonService.getStudentGrade(id);
        degree=PersonService.getStudentDegree(id);
        gender=PersonService.getStudentGender(id);
        birthday=PersonService.getStudentBirthday(id);
        headPath=PersonService.getStudentHeadPath(id);
    }
    if(headPath.equals("")){
        headPath="images/pro1.jpg";
    }

    List<Course> courses= CourseService.getCoursesByTid(id);
    List<Course> s_courses=CourseService.getCoursesBySid(id);
%>

<html lang="en">
<head>
    <meta charset="UTF-8" content="user-scalable=no">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>个人主页</title>
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/self.css">
    <script src="lib/vue.js"></script>
    <script src="lib/vue-resource.js"></script>
</head>
<body>
    <!--头部-->
    <div class="top">
        <div class="w">
            <div class="top-left">
                <img src="images/Q-logo.png">
            </div>
            <div class="top-center">
                <input type="text" placeholder="搜索你感兴趣的课程" id="wd">
                <script>
                    function search() {
                        var wd=document.getElementById('wd');
                        window.location.href="search-result.jsp?wd="+wd.value;
                    }
                </script>
                <button class="iconfont" onclick="search()">&#xe63c;</button>
            </div>
            <div class="top-right">
                <ul>
                    <a href="index.jsp"><li>首页</li></a>
                    <li onclick="alert('请退出登录！')">登录注册</li>
                    <li class="current">个人主页</li>
                </ul>
            </div>
        </div>
    </div>

    <div class="top-self" style="background-image: url(images/bg1.jpg); background-size: cover;">
        <div class="w">
            <img class="pro" src="<%=headPath%>" alt="123"/>
            <div class="text">
                <h2><%=nickname%>
                    <%
                        if(identity.equals("teacher")){
                            out.write("老师");
                        }else{
                            out.write("同学");
                        }
                    %>，欢迎登录</h2>
                <h4>构成我们学习最大障碍的是已知的东西，而不是未知的东西。——贝尔纳</h4>
            </div>
            <a href="QuitLogin"><button class="log_out">退 出 登 录</button></a>
        </div>
    </div>
    <!--中部-->
    <div class="main">
        <div class="main-top-bar">
            <div class="w">
                <a href="#" class="current">个人信息</a>
                <a href="#">我的学习</a>
                <%
                    if(identity.equals("teacher")){
                %>
                        <a href="#">我的课程</a>
                <%
                    }
                %>
            </div>
        </div>
        <div class="main-content">
            <div class="w2">
                <div class="dom" style="display: block;">
                    <div class="dom1">
                        <p>绝不会以任何形式向第三方透漏你的身份信息</p>
                        <form action="Update" method="post" enctype="multipart/form-data">
                            <ul>
                                <li>
                                    <span>头像</span>
                                    <img id="pro-img" src="<%=headPath%>"/>
                                    <div class="control">
                                        <div class="edit-pro">编辑头像</div>
                                    </div>
                                    <input id="pro" type="file" title="" name="headPortrait">
                                </li>
                                <li class="clearfix">
                                    <!--<span class="must">*</span>-->
                                    <span>用户名：</span>
                                    <input name="nickname" value="<%=nickname%>">
                                </li>
                                <li class="clearfix"><span>学校：</span><input name="school" value="<%=school%>"></li>
                                <li class="clearfix"><span>专业：</span><input name="major" value="<%=major%>"></li>
                                <li class="clearfix"><span>年级：</span><input name="grade" value="<%=grade%>"></li>
                                <li class="clearfix"><span>学历：</span><input name="degree" value="<%=degree%>"></li>
                                <li class="clearfix"><span>性别：</span><input name="gender" value="<%=gender%>"></li>
                                <li class="clearfix"><span>出生年月日：</span><input name="birthday" value="<%=birthday%>"></li>
                            </ul>
                            <button class="save" type="submit">保存</button>
                        </form>
                    </div>
                </div>
                <div class="dom">
                    <div class="dom2">
                        <div class="search_joined">
                            <input name="" type="text" placeholder="搜索我加入的课程"/>
                            <button>搜索</button>
                        </div>
                        <%
                            for(int i=0;i<(s_courses.size()+4)/5;++i){
                        %>
                                <ul id="selected">
                                <%
                                    for(int j=i*5;j<i*5+5&&j<s_courses.size();++j){
                                        Course course=s_courses.get(j);
                                %>
                                        <li>
                                            <a href="play.jsp?cid=<%=course.cid%>&courseName=<%=course.cname%>">
                                                <img src="<%=course.imagePath%>"/>
                                            </a>
                                            <p class="c_name"><%=course.cname%></p>
                                            <hr noshade="1" size="2px" color="#dddddd" align="center" width="200px">
                                            <p class="c_info">共计课时：30课时</p>
                                            <button class="drop" @click="drop($event,<%=course.cid%>,'<%=id%>')">退课</button>
                                        </li>
                                <%
                                    }
                                %>
                                </ul>
                        <%
                            }
                        %>
                    </div>
                </div>
                <div class="dom">
                    <div class="dom2">
                        <div class="search_joined">
                            <input name="" type="text" placeholder="搜索我创建的课程"/>
                            <button>搜索</button>
                        </div>
                        <a href="create-course.jsp"><button class="c_create">新建课程</button></a>
                        <ul id="courses">
                        <%
                            for (int i=0;i<courses.size();i++){
                                Course course=courses.get(i);
                        %>
                            <li id=<%=course.cid%> tag=<%=course.imagePath%> >
<%--                                跳转到course.jsp页面
                                <a href="course.jsp?cid=<%=course.cid%>&imagePath=<%=course.imagePath%>&courseName=<%=course.cname%>">
                                    <img alt="" src=<%=course.imagePath%>>
                                    </img>
                                </a>
                                --%>
                                <a href="play.jsp?cid=<%=course.cid%>&courseName=<%=course.cname%>">
                                    <img alt="" src=<%=course.imagePath%>>
                                    </img>
                                </a>
                                <p class="c_name"><%=course.cname%></p>
                                <hr noshade="1" size="2px" color="#dddddd" align="center" width="200px">
                                <p class="c_info">共计课时：30课时</p>
                                <button class="delete" tag="delete">删除</button>
                                <button tag="manage">管理</button>
                            </li>
                        <%
                            }
                        %>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/myFunc.js"></script>
    <script>
        window.onload = function () {
            // 1.1 获取需要的标签
            let as = document.getElementsByClassName('main-top-bar')[0].getElementsByTagName('a');
            let contents = document.getElementsByClassName('dom');

            // 1.2 遍历
            for (let i = 0; i < as.length; i++) {
                // 1.2.1 取出单个对象
                let a = as[i];
                a.id = i;

                // 1.2.2 监听鼠标的移动事件
                a.onclick = function () {
                    // 让所有的a的class都清除
                    for (let j = 0; j < as.length; j++) {
                        as[j].className = '';
                        contents[j].style.display = 'none';
                    }

                    // 设置当前a的class
                    this.className = 'current';
                    // 从contents数组中取出对应的标签
                    contents[this.id].style.display = 'block';
                }

            }

            var file = document.getElementById('pro');
            file.onchange = function () {
                var path = this.value;
                var suffix = path.substr(path.lastIndexOf('.'));
                var lower_suffix = suffix.toLowerCase();

                if(lower_suffix === '.jpg' || lower_suffix === '.png' || lower_suffix === '.jpeg' || lower_suffix === '.gif'){
                    var reader = new FileReader(); //判断图片是否加载完毕
                    reader.onload = function(evt){
                        if(reader.readyState === 2){ //加载完毕后赋值
                            $('pro-img').src = evt.target.result;
                        }
                    }
                    reader.readAsDataURL(file.files[0]);
                }else {
                    alert('上传图片不正确');
                }
            }

            var courses = $('courses').children;
            console.log(courses);

            for(var i=0; i<courses.length; i++){
                var btn = courses[i].getElementsByClassName('delete')[0];
                console.log(btn);

                //监听按钮的点击
                btn.onmousedown = function () {
                    var r = confirm('你确定要删除视频吗？');
                    if(r)
                        this.parentNode.remove();
                }
            }


            // 1.3 利用事件委托给管理按钮添加事件 zmj
            var ul=document.getElementById("courses");
            ul.onclick=function (ev) {
                var son = ev.target;  // button
                if(son instanceof HTMLButtonElement && son.getAttribute("tag")==="manage"){  // 如果son是button
                    var li = son.parentNode;
                    var cid = li.id;
                    var imagePath=li.getAttribute("tag");
                    window.location.href="manage-videos.jsp?cid="+cid+"&imagePath="+imagePath;
                }
            }

            // 1.4 退课提醒
            // var selected = $('selected').children;
            // console.log(selected);
            //
            // for(var j=0; j<selected.length; j++){
            //     var drop = selected[j].getElementsByClassName('drop')[0];
            //     console.log(drop);
            //
            //     //监听按钮的点击
            //     drop.onclick = function () {
            //         console.log(this);
            //         var re = confirm('你确定要退课吗？');
            //         if(re)
            //             this.parentNode.remove();
            //     }
            // }
        }

        var vm=new Vue({
            el:"#selected",
            data:{

            },
            methods:{
                drop(e,cid,id){
                    var re = confirm('你确定要退课吗？');
                    console.log(cid);
                    console.log(id);
                    if(re){
                        console.log(e.currentTarget);
                        this.$http.get("http://152.136.148.42:8080/College_war_exploded/DropClass?cid="+cid+"&id="+id).then(
                            (result)=>{
                                if(result.body==="success"){
                                    alert("退课成功！");
                                    e.target.parentNode.remove();
                                }else {
                                    console.log(result.body);
                                }

                            },
                            ()=>{
                                alert("退课失败！");
                            }
                        )
                    }
                }
            }
        })

    </script>

    <!--尾部-->
    <div class="bottom">
        <div class="bottom-board">
            <span>丰富的视频资源帮助学生更好地学习</span>
            <span>基于认知负荷的多少推荐课程</span>
            <span>方案多多，适合每一位学生</span>
        </div>
    </div>
</body>
</html>